<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList">
		<view class="container">
			<view class="search">
				<up-search placeholder="搜索" v-model="value" :show-action="false" :clearabled="true"
					@search="search"></up-search>
			</view>
			<view class="content">
				<!-- <view class="titleList">
					<view class="list1 list">序号</view>
					<view class="list2 list">姓名</view>
					<view class="list3 list">联系方式</view>
					<view class="list4 list">公司</view>
					<view class="list5 list">部门</view>
				</view>
				<view class="items" v-for="(item,index) in dataList" :key="index" >
					<view class="list1 list">{{item.id}}</view>
					<view class="list2 list">{{item.name}}</view>
					<view class="list3 list">{{item.phone}}</view>
					<view class="list4 list">{{item.company_name}}</view>
					<view class="list5 list">{{item.dept_name}}</view>
				</view> -->

				<view class="mail-item" v-for="(item, index) in dataList" :key="index">
					<view class="title">
						{{ item.name }}
					</view>
					<view class="company_name_dept_name">
						<view class="company_name" v-if="item.company_name">
							{{ item.company_name }}
						</view>
						<view class="dept_name">
							{{ item.dept_name }}
						</view>
					</view>
					<view class="phone">
						{{ item.phone }}
					</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script>
import { employeeList } from '../../api/reportedMaintenance.js'
export default {
	data() {
		return {
			value: '',
			dataList: [],
		};
	},
	methods: {
		search() {
			this.queryList(1)
		},
		queryList(pageNo, pageSize) {
			employeeList({
				page: pageNo,
				limit: 30,
				name: this.value
			}).then((res) => {
				this.$refs.paging.complete(res.data);
			})
		}
	}
}
</script>

<style lang="scss">
.zp-paging-container {
	background-color: #fefefe;
}

.container {
	background-color: #fefefe;
	padding: 0 25rpx;

	.search {
		padding: 18rpx 0;
		background-color: #fefefe;
	}

	.content {
		padding: 25rpx;

		.titleList {
			display: flex;

			.list {
				text-align: center;
				font-size: 22rpx;
				font-weight: 600;
				width: calc(100%/5);
			}
		}

		.items {
			margin-top: 25rpx;
			display: flex;

			.list {
				text-align: center;
				font-size: 22rpx;
				width: calc(100%/5);
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.mail-item {
			margin-bottom: 20rpx; // 添加下边距
			padding: 20rpx;
			background-color: #fff;
			border-radius: 10rpx;
			box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1);

			.title {
				font-size: 30rpx;
				// font-weight: bold; // 文字加粗
				margin-bottom: 10rpx;
			}

			.company_name_dept_name {
				color: #999;
				font-size: 26rpx;
				display: flex;
				margin-bottom: 10rpx;
				// justify-content: space-between; // 两端对齐
				// .company_name {
				// }
				>view+view {
					margin-left: 10rpx;
				}
			}

			.phone {
				font-size: 26rpx;
				color: #999;
				margin-bottom: 0; // 单独一行
			}
		}
	}
}
</style>